

<style>
	.video { width: 320px; height: 320px; padding: 0.5em; }
	.txt { width: 320px; height: 220px; padding: 0.5em; }
	.img { width: 300px; height: 300px; padding: 0.5em; }
	.audio { width: 460px; height: 60px; padding: 0.5em; }
</style>

<script type="text/javascript" src="js/audiojs/audio.min.js"></script>

<script>
$(function() {

	$("#content").css("height","850px");
	
	//carrega o componente novo info
	$("#cfExibeInfo").load("componentes/exibeInfo.php");
	
	//carrega o componente ler mensagens
	$("#cpEnviaMsg").load("componentes/enviarMensagensInfo.php?id="+$("#txtIdPessoa").val()+"&idinfo="+$("#infoId").val());
	
});


function mostraInfos(){	
	$('#exibe_info').dialog({show: "blind",
							hide: "explode",
							width:250,
							height:300,
							resizable:false}); 
}

function exibeInfo(param){
	
	//seta parametro do infografico do momento
	$("#infoId").val(param);
	
	$.ajax({
		type:"POST",
		url:"actions/infograficoAction.php",
		data:{oper:'list',
			  id:param},
		dataType:"json",
		success: function(data, textStatus, request){
			$("#conteudo_infografico").html(data['html']);
			$("#cpEnviaMsg").load("componentes/enviarMensagensInfo.php?id="+data['pessoa_id']+"&idinfo="+$("#infoId").val());			
			audiojs.createAll();
			$('#exibe_info').dialog('close');
		}	
	});
}

audiojs.events.ready(function() {
	audiojs.createAll();
});

function enviarMensagem(){	
	if($("#infoId").val()==""){
		$.jAlert("Selecione um Infografico", '', function(result) {});
	}else{
		$('#ler_msg').dialog({show: "blind", hide: "explode", width:437, height:220, resizable:false}); 
	}
}

	
</script>

<input type="hidden" id="infoId" name="infoId"/>

<div style="position:absolute;top:70px;left:1150px;height:10px;width:10px;color:#000;font-weight:bold;text-align:right;">
    <a href="/?pg=home" title="Sair" style="border:0;">
        <img src="images/btnOutros/btnSairForms.png"/>
    </a>
</div>

<div id="conteudo_infografico" style="position:relative;width:1000px;margin-left:auto;margin-right:auto;top:100px;height:620px;overflow:auto;border:#333;border-bottom-width:thin;border-style:dashed;border-spacing:inherit;">
</div>


<br /><br /><br /><br /><br /><br /><br />



<div id="menus" style="background:#CCC;position:relative;width:100%;height:30px;text-align:center;margin-top:5px;">
	
    <div style="position:relative;width:1000px;margin-left:auto;margin-right:auto;">
    
        <div style="width:200px;float:left;margin-left:50px;text-align:center;">            
            <a href="javascript:void(0);" title="Procurar" onclick="mostraInfos();">
                <img src="images/IconsInfoGrafico/Img12.png" />
            </a>
            &nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" title="Mensagem" onclick="enviarMensagem();">
                <img src="images/IconsInfoGrafico/Img6.png" />
            </a>
        </div>
        <div style="width:500px;float:left;text-align:center;">
            
        </div>
        <div style="width:200px;float:left;margin-right:50px;text-align:center;">
            
        </div>
    
    </div>
    
</div>  


<!-- -----------Exibe Info Componente------------- -->
<div id="cfExibeInfo" style="display:none;"></div>
<!-- -----------Exibe Info Componente------------- -->

<!-- -----------Mensagem Componente------------- -->
<div id="cpEnviaMsg" style="display:none;"></div>
<!-- -----------Mensagem Componente------------- -->